<template>
  <view class="gongwei">
    <bazi-section title="天干/地支留意">
      <view class="liuqin-containter" v-if="isVip != 1">
        <view class="info">
          <view class="score-box">
            <view class="title">天干留意：</view>
            <view class="score">
              <template v-if="baziResult.tianGanAttention.length != 0">
                <span v-for="item in baziResult.tianGanAttention">{{ item }};</span>
              </template>
              <template v-else>
                <span>无</span>
              </template>
            </view>
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">地支留意：</view>
            <view class="score">
              <template v-for="item in baziResult.diZhiAttention">
                <span>{{ item }};</span>
              </template>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <no-vip></no-vip>
      </view>
    </bazi-section>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
export default {
  components: {
    baziSection,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      baziResult: this.result,
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.gongwei {
  width: 100%;
  box-sizing: border-box;
}

.liuqin-containter {
  padding: 32rpx 0;
}

.section {
  width: 100%;
  height: 72rpx;
  color: white;
  background: #c5a680;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 46rpx;

  .section-title {
    padding-right: 22rpx;
  }
}
.info:last-of-type {
  margin-top: 24rpx;
}
.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 52rpx;
  background: rgba(216, 216, 216, 0.1);

  .score-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .title {
      color: #2c2c2c;
      width: fit-content;
      white-space: nowrap;
      font-size: 28rpx;
      font-weight: bold;
    }

    .score {
      font-size: 24rpx;
      margin: 0 30rpx 0 10rpx;
    }
  }
}
</style>
